<html>
<head>
  <style>
    
    div.container 
    {
      flow:horizontal-wrap;
      width:*;
      height:*;
      border:1dip solid;
    }
    div.cell 
    {
      height:3em;
      width:*;
      overflow:hidden;
    }
    div.cell:nth-child(1),
    div.cell:nth-child(3n+1)
    {
      clear:right; /* four in the row; */
    }
    
    div.test
    {
      background-color: gold;
      color: black;
      width:100dip;
      padding:4dip;
      margin:4dip;
      white-space:nowrap;
      overflow:hidden;
      
    }
    div.test:hover
    {
      background-color: red;
      width:200dip;
    }
    
    div.test:hover[ease="linear"]         { transition: width(linear,0.5s)      background-color(linear,0.5s,0.5s); }
    div.test:hover[ease="quad-in"]        { transition: width(quad-in,0.5s)     background-color(quad-in,0.5s,0.5s); }
    div.test:hover[ease="quad-out"]       { transition: width(quad-out,0.5s)    background-color(quad-out,0.5s,0.5s); }
    div.test:hover[ease="quad-in-out"]    { transition: width(quad-in-out,0.5s) background-color(quad-in-out,0.5s,0.5s); }
    div.test:hover[ease="cubic-in"]       { transition: width(cubic-in,0.5s)    background-color(cubic-in,0.5s,0.5s); }
    div.test:hover[ease="cubic-out"]      { transition: width(cubic-out,0.5s)   background-color(cubic-out,0.5s,0.5s); }
    div.test:hover[ease="cubic-in-out"]   { transition: width(cubic-in-out,0.5s)background-color(cubic-in-out,0.5s,0.5s); }
    div.test:hover[ease="quart-in"]       { transition: width(quart-in,0.5s)    background-color(quart-in,0.5s,0.5s); }
    div.test:hover[ease="quart-out"]      { transition: width(quart-out,0.5s) background-color(quart-out,0.5s,0.5s); }
    div.test:hover[ease="quart-in-out"]   { transition: width(quart-in-out,0.5s) background-color(quart-in-out,0.5s,0.5s); }
    div.test:hover[ease="quint-in"]       { transition: width(quint-in,0.5s) background-color(quint-in,0.5s,0.5s); }
    div.test:hover[ease="quint-out"]      { transition: width(quint-out,0.5s) background-color(quint-out,0.5s,0.5s); }
    div.test:hover[ease="quint-in-out"]   { transition: width(quint-in-out,0.5s) background-color(quint-in-out,0.5s,0.5s); }
    div.test:hover[ease="sine-in"]        { transition: width(sine-in,0.5s) background-color(sine-in,0.5s,0.5s); }
    div.test:hover[ease="sine-out"]       { transition: width(sine-out,0.5s) background-color(sine-out,0.5s,0.5s); }
    div.test:hover[ease="sine-in-out"]    { transition: width(sine-in-out,0.5s) background-color(sine-in-out,0.5s,0.5s); }
    div.test:hover[ease="expo-in"]        { transition: width(expo-in,0.5s) background-color(expo-in,0.5s,0.5s); }
    div.test:hover[ease="expo-out"]       { transition: width(expo-out,0.5s) background-color(expo-out,0.5s,0.5s); }
    div.test:hover[ease="expo-in-out"]    { transition: width(expo-in-out,0.5s) background-color(expo-in-out,0.5s,0.5s); }
    div.test:hover[ease="circ-in"]        { transition: width(circ-in,0.5s) background-color(circ-in,0.5s,0.5s); }
    div.test:hover[ease="circ-out"]       { transition: width(circ-out,0.5s) background-color(circ-out,0.5s,0.5s); }
    div.test:hover[ease="circ-in-out"]    { transition: width(circ-in-out,0.5s) background-color(circ-in-out,0.5s,0.5s); }
    div.test:hover[ease="elastic-in"]     { transition: width(elastic-in,0.5s) background-color(elastic-in,0.5s,0.5s); }
    div.test:hover[ease="elastic-out"]    { transition: width(elastic-out,0.5s) background-color(elastic-out,0.5s,0.5s); }
    div.test:hover[ease="elastic-in-out"] { transition: width(elastic-in-out,0.5s) background-color(elastic-in-out,0.5s,0.5s); }
    div.test:hover[ease="back-in"]        { transition: width(back-in,0.5s) background-color(back-in,0.5s,0.5s); }
    div.test:hover[ease="back-out"]       { transition: width(back-out,0.5s) background-color(back-out,0.5s,0.5s); }
    div.test:hover[ease="back-in-out"]    { transition: width(back-in-out,0.5s) background-color(back-in-out,0.5s,0.5s); }
    div.test:hover[ease="bounce-in"]      { transition: width(bounce-in,0.5s) background-color(bounce-in,0.5s,0.5s); }
    div.test:hover[ease="bounce-out"]     { transition: width(bounce-out,0.5s) background-color(bounce-out,0.5s,0.5s); }
    div.test:hover[ease="bounce-in-out"]  { transition: width(bounce-in-out ,0.5s) background-color(bounce-in-out ,0.5s,0.5s); } 
    
  </style>  
</head>
<body>
  <h1>Extended transition property demo, ease functions</h1>
  <div .container>
    <div .cell><div .test  ease="linear"        >linear</div></div>
    <div .cell><div .test  ease="quad-in"       >quad-in</div></div>
    <div .cell><div .test  ease="quad-out"      >quad-out</div></div>
    <div .cell><div .test  ease="quad-in-out"   >quad-in-out</div></div>
    <div .cell><div .test  ease="cubic-in"      >cubic-in</div></div>
    <div .cell><div .test  ease="cubic-out"     >cubic-out</div></div>
    <div .cell><div .test  ease="cubic-in-out"  >cubic-in-out</div></div>
    <div .cell><div .test  ease="quart-in"      >quart-in</div></div>
    <div .cell><div .test  ease="quart-out"     >quart-out</div></div>
    <div .cell><div .test  ease="quart-in-out"  >quart-in-out</div></div>
    <div .cell><div .test  ease="quint-in"      >quint-in</div></div>
    <div .cell><div .test  ease="quint-out"     >quint-out</div></div>
    <div .cell><div .test  ease="quint-in-out"  >quint-in-out</div></div>
    <div .cell><div .test  ease="sine-in"       >sine-in</div></div>
    <div .cell><div .test  ease="sine-out"      >sine-out</div></div>
    <div .cell><div .test  ease="sine-in-out"   >sine-in-out</div></div>
    <div .cell><div .test  ease="expo-in"       >expo-in</div></div>
    <div .cell><div .test  ease="expo-out"      >expo-out</div></div>
    <div .cell><div .test  ease="expo-in-out"   >expo-in-out</div></div>
    <div .cell><div .test  ease="circ-in"       >circ-in</div></div>
    <div .cell><div .test  ease="circ-out"      >circ-out</div></div>
    <div .cell><div .test  ease="circ-in-out"   >circ-in-out</div></div>
    <div .cell><div .test  ease="elastic-in"    >elastic-in</div></div>
    <div .cell><div .test  ease="elastic-out"   >elastic-out</div></div>
    <div .cell><div .test  ease="elastic-in-out">elastic-in-out</div></div>
    <div .cell><div .test  ease="back-in"       >back-in</div></div>
    <div .cell><div .test  ease="back-out"      >back-out</div></div>
    <div .cell><div .test  ease="back-in-out"   >back-in-out</div></div>
    <div .cell><div .test  ease="bounce-in"     >bounce-in</div></div>
    <div .cell><div .test  ease="bounce-out"    >bounce-out</div></div>
    <div .cell><div .test  ease="bounce-in-out" >bounce-in-out </div></div>
  </div>

</body>
</html>